<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建房间</title>
    <style>
       
       html,body {
            height: 100%;
            width: 100%;
            background-image: url(./img/create_room.png);
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }
        
        #container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            perspective: 1000px;
        }
        
        #box {
            width: 200px;
            height: 200px;
            position: relative;
            transform-style: preserve-3d;
            animation: rotate 6s infinite linear;
        }
        
        #box:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
            pointer-events: none;
        }
        
        .shape {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.8;
            animation: rotate 4s infinite linear;
        }
        
        .shape:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 100%);
        }
        
        .shape1 {
            transform: translateZ(100px);
            background-color: rgba(255, 0, 0, 0.6);
        }
        
        .shape2 {
            transform: rotateX(90deg) translateZ(100px);
            background-color: rgba(0, 255, 0, 0.6);
        }
        
        .shape3 {
            transform: rotateY(90deg) translateZ(100px);
            background-color: rgba(0, 0, 255, 0.6);
        }
        
        .shape4 {
            transform: rotateX(-90deg) translateZ(100px);
            background-color: rgba(255, 255, 0, 0.6);
        }
        
        .shape5 {
            transform: rotateY(-90deg) translateZ(100px);
            background-color: rgba(255, 0, 255, 0.6);
        }
        
        .shape6 {
            transform: rotateX(180deg) translateZ(100px);
            background-color: rgba(0, 255, 255, 0.6);
        }
        
        @keyframes rotate {
            from {
                transform: rotateY(0deg);
            }
            to {
                transform: rotateY(360deg);
            }
        }

        #content{
            position: absolute;
            left:50%;  
            top:50%;  
            margin:-100px 0 0 -150px 
        }

        #send_msg{
            width: 300px;
            height: 50px;
            background-color: #ffffff55;
            font-size: 30px;
            border: 2px solid rgba(255, 238, 204, 0.547)(255, 238, 204, 0.727); border-radius: 5px;
            vertical-align: top;
        }

        #send_button{
            width: 150px;
            height: 40px;
            background-color: aquamarine;
            font-size: 20px;
            margin-top: 20px;
            text-align: center;
        }

        #return_button{
            width: 150px;
            height: 40px;
            background-color: aquamarine;
            font-size: 20px;
            margin-top: 20px;
            text-align: center;
        }

        #return_button:active{
         
            background-color: rgb(137, 222, 118);
        }

        #send_button:active{
         
            background-color: rgb(137, 222, 118);
        }

        #cancel{
            position: absolute;
            top: 70%;
            width: 300px;
            height: 60px;
            font-size: 25px;
            background-color: aquamarine;
        }

        #cancel:active{
            background-color: red;
        }

        #tip{
            position: absolute;
            top: 20%;
            font-size: 30px;
        }

        
    </style>
    <link rel="shortcut icon" href="./img/favicon.ico" >
</head>
<body>
    <div id="container" style="visibility: hidden;"> 
        <p id="tip">正在等待其它玩家进入</p>
        <div id="box">
            <div class="shape shape1"></div>
            <div class="shape shape2"></div>
            <div class="shape shape3"></div>
            <div class="shape shape4"></div>
            <div class="shape shape5"></div>
            <div class="shape shape6"></div>
        </div>
        <button id="cancel">取消创建</button>
    </div>

    <div id="content">
        <p style="font-size: 20px;">输入相同密钥，即可进入同一房间</p>
        <input type="text" id="send_msg"> <br>
        <button id="return_button">返回大厅</button> <button id="send_button">加入</button>
    </div> 

</body>

    <!-- 长连接建立处理 -->
    <script>
        var ws_url = "ws://" + location.host + "/create_room";
        var ws_hdl = new WebSocket(ws_url);

        window.onbeforeunload = function(){
            ws_hdl.close();
        }
        ws_hdl.onopen = function(){
            console.log("独自创建房间页面的长连接 open");
        }

        ws_hdl.onclose =  function(){
            console.log("独自创建房间页面的长连接 close");
        }
        ws_hdl.onerror =  function(){
            console.log("独自创建房间页面的长连接 error");
        }
        ws_hdl.onmessage = function(evt){
            var rsp_json = JSON.parse(evt.data);
            if (rsp_json.result == false)
            {
                alert(rsp_json.reason);
                location.replace("/login.html");
                return;
            }
            if (rsp_json.optype == "create_room_ready")
            {
                console.log("自己创建房间已连接");
            }
            else if (rsp_json.optype == "create_start")
            {
                console.log("已加入自己创建房间队列");
                var room_msg = "房间密钥：";
                room_msg += rsp_json["room_num"];
                room_msg += " 正等待其它玩家进入";

                var tip_msg = document.getElementById("tip");
                tip_msg.innerHTML = room_msg;
            }
            else if (rsp_json.optype == "create_stop")
            {
                console.log("已取消匹配");
            }
            else if (rsp_json.optype == "create_success")
            {
                console.log("准备进入游戏房间");
                location.replace("/game_room.html");
            }
        }
    </script>

    <script>
        var rt_bt = document.getElementById("return_button");
        rt_bt.onclick = function(){
            console.log("返回对弈大厅");
            location.replace("/game_hall.html");
        }

        var match_bt = document.getElementById("send_button");
        match_bt.onclick = function(){ 

        //没有进行匹配的状态下点击按钮，发送对战匹配请求
        var req_json = {
            optype: "create_start",
            room_num: document.getElementById("send_msg").value
        }

        var con = document.getElementById("content");
        con.style.visibility = "hidden";
        var wait = document.getElementById("container");
        wait.style.visibility = "";

        ws_hdl.send(JSON.stringify(req_json));               
    }

    var cancel_bt = document.getElementById("cancel");
    cancel_bt.onclick = function(){

        //在匹配的状态下点击按钮，发送取消匹配请求
        var req_json = {
                optype: "create_stop",
                room_num: document.getElementById("send_msg").value
            }
        
        var con = document.getElementById("container");
        con.style.visibility = "hidden";
        var wait = document.getElementById("content");
        wait.style.visibility = "";
        ws_hdl.send(JSON.stringify(req_json));          
    }
    </script>
</html>